<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .container {
        margin: 0 auto;
        width: 500px;
      }
      .wrapper {
        margin: 10px;
      }
      img {
        /* 工作原理：脱离正常文档布局流，并吸附到容器左边脱离正常文档布局流，并吸附到容器左边
                正常布局中位于该浮动元素的内容会围绕着元素，并填充满左边。
        */
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <h1>文章标题</h1>
        <img src="./icons/cook.png" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
          aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
          pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
          nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at
          porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
          egestas ligula. Curabitur vehicula tellus neque, ac ornare ex
          malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
          Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
          pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
          quam nec lacus varius commodo et a urna. Ut id ornare felis, eget
          fermentum sapien.
        </p>
        <p>END</p>
      </div>
    </div>
  </body>
</html>
